<template>
  <view class="index-content">
    <Navbar @leftClick="leftClick"
            :autoBack="true"
            title="设备看板" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar>
    <view class="index-block search-top">
      <u-search
	  :showAction="true"
	  actionText="搜索"
	  placeholder="请输入设备名称"
	  v-model="keyword"
	  @custom="searchBank"
	  @search="searchBank"
	  ></u-search>
    </view>
    <view class="u-page">
      <u-list
      >
        <u-list-item
            v-for="(item, index) in devList"
            @tap="navigateTo('/pages/device/detail?number='+item.number+'&name='+item.name+'&status='+getDevStatus(item)+'&type='+item.type+
			'&runTime='+item.runTime+'&warnTime='+item.warnTime+'&standbyTime='+item.standbyTime+'&shutdownTime='+item.shutdownTime)"
            :key="index"
        >
          <view class="index-block list-content">
            <u-cell-group :title="item.name" style="padding: 0 5px 20px 20px" :border="true">
              <u-row :customStyle="{'background-color': '#6eaeff',}">
                <u-col span="6">
                  <u-cell
                      :title-style="fontSizeFirst"
                      :center="true"
                      title="持续生产时间"
                  ></u-cell>
                </u-col>
                <u-col span="6">
                  <u-cell
                      :title-style="fontSizeFirst"
                      :center="true"
                      title="--"
                  ></u-cell>
                </u-col>
              </u-row>
              <u-row customStyle="margin-bottom: 10px">
                <u-col span="6">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6" class="col-cell-class">
                      <view class="demo-layout bg-purple-light font-size-custom">运行状态</view>
                    </u-col>
                    <u-col span="6">
                      <u--text :size="textFontSize" type="warning" :text="getDevStatus(item)"></u--text>
                    </u-col>
                  </u-row>
                </u-col>
                <u-col span="6">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                      <view class="demo-layout bg-purple-light font-size-custom">异常停止次数</view>
                    </u-col>
                    <u-col span="6">
                      <u--text :size="textFontSize" type="warning" text="0"></u--text>
                    </u-col>
                  </u-row>
                </u-col>
              </u-row>
              <u-line></u-line>
              <u-row customStyle="margin-bottom: 10px">
                <u-col span="6">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                      <view class="demo-layout bg-purple-light font-size-custom">运行时间</view>
                    </u-col>
                    <u-col span="6">
                      <u--text :size="textFontSize" type="warning" :text="getRunTime(item.runTime)"></u--text>
                    </u-col>
                  </u-row>
                </u-col>
                <u-col span="6">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                      <view class="demo-layout bg-purple-light font-size-custom">异常停止时间</view>
                    </u-col>
                    <u-col span="6">
                      <u--text :size="textFontSize" type="warning" text="0分钟"></u--text>
                    </u-col>
                  </u-row>
                </u-col>

              </u-row>
              <u-line></u-line>
              <u-row customStyle="margin-bottom: 10px">
                <u-col span="6">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                      <view class="demo-layout bg-purple-light font-size-custom">稼动率</view>
                    </u-col>
                    <u-col span="6">
                      <u--text :size="textFontSize" type="warning" :text="(item.utilization*100).toFixed(2) + '%'"></u--text>
                    </u-col>
                  </u-row>
                </u-col>
                <u-col span="6">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                      <view class="demo-layout bg-purple-light font-size-custom">最长停止时间</view>
                    </u-col>
                    <u-col span="6">
                      <u--text :size="textFontSize" type="warning" text="0分钟"></u--text>
                    </u-col>
                  </u-row>
                </u-col>
              </u-row>
            </u-cell-group>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import { getDevStatus } from '../../utils/tools';

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      keyword: '',
      fontSizeFirst: {'font-size': '28rpx', 'color': 'white'},
      textFontSize: '13px',
      indexList: [],
	  devs: [],
	  devList: [],
    }
  },
  mounted() {

  	//this.devs = getApp().globalData.devs
  },
  onLoad(option) {
	const type = option.type
	switch(type){
		case '1': this.devs = getApp().globalData.devs.filter((item)=>{return item.data?.substring(3) == '1'}) ;break;
		case '2': this.devs = getApp().globalData.devs.filter((item)=>{return item.data?.substring(1,2) == '1'||item.data=='0000'}) ;break;
		case '3': this.devs = getApp().globalData.devs.filter((item)=>{return item.data?.substring(0,1) == '1'}) ;break;
		default: this.devs = getApp().globalData.devs
	}
	Object.assign(this.devList,this.devs)
    //this.loadmore()
  },
  methods: {
	searchBank(e){
		  this.devList = this.devs.filter((item)=>{ return item.name.includes(e) })
	},
	getRunTime(runTime){
		var h = Math.floor(runTime / 3600);
		var m = Math.floor((runTime % 3600) / 60);
		return h+'小时'+m+'分'
	},
	getDevStatus(item){
		return getDevStatus(item)
	},
    navigateTo(url) {
      uni.navigateTo({url: url})
    },
    leftClick() {
      console.log('leftClick');
    },
    scrolltolower() {
      this.loadmore()
    },
    loadmore() {
      for (let i = 0; i < 10; i++) {
        this.indexList.push({
          url: 'aaa'
        })
      }
    }
  },
}
</script>

<style lang="scss">
.index-content {
  background: linear-gradient(to bottom, #5599ff 30%, #ffffff 70%);
  min-height: 100vh;
}

.index-block {
  margin: 10px 20px 0 20px;
  padding: 5px 30px 5px 30px;
  line-height: 32px;
  background: white;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  border-radius: 12px;
}

.search-top {
  margin: 10px 20px 10px 20px;
}

.list-content {
  padding: 5px 10px 5px 20px;
}


.item-tj {
  height: 160rpx;

  &-frist {
    background-color: rgba($color: white, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}

.col-cell-class {
  padding: 0 20px 0 10px;
}

.font-size-custom {
  font-size: 12px
}

</style>
